<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3"
      xmlns:shiro="http://www.w3.org/1999/xhtml">
    <head th:include="common/Head :: headCss">

    </head>
       <!-- <link rel="stylesheet" href="../bootstrap/js/dept/css/bootstrap-table.min.css">-->
       <!-- <link rel="stylesheet" href="../bootstrap/js/dept/css/jquery.treegrid.css">-->
       <!-- <link rel="stylesheet" href="../ztree/css/metroStyle/metroStyle.css">-->

        <link rel="stylesheet" href="../ztree/css/metroStyle/metroStyle.css">
        <link rel="stylesheet" th:href="@{/fonticon-picker/icon-css/jquery.fonticonpicker.min.css}">
        <link rel="stylesheet" th:href="@{/fonticon-picker/icon-css/jquery.fonticonpicker.bootstrap.min.css}">




    </div>
    <body>
        <div id="wrapper">
            <nav th:include="common/Left_Ment :: left"></nav>
            <div id="page-wrapper" class="gray-bg dashbard-1">
                <div th:include="common/Head :: head"></div>
                <div v-show="showList">
                    <div class="grid-btn">
                        <a class="btn btn-primary" @click="add"><i class="fa fa-plus"></i>&nbsp;新增</a>
                        <a class="btn btn-primary" @click="update"><i class="fa fa-pencil-square-o"></i>&nbsp;修改</a>
                        <a class="btn btn-primary" @click="del"><i class="fa fa-trash-o"></i>&nbsp;删除</a>
                    </div>
                    <table id="deptTable" data-mobile-responsive="true" data-click-to-select="true">
                        <thead>
                            <tr>
                                <th data-field="selectItem" data-checkbox="true"></th>
                            </tr>
                        </thead>
                    </table>
                </div>

                <div v-show="!showList" class="panel panel-default">
                    <div class="panel-heading">{{title}}</div>
                    <form class="form-horizontal">
                        <div class="form-group">
                            <div class="col-sm-2 control-label">菜单名称</div>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" v-model="dept.pname" placeholder="菜单名称"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-2 control-label">访问路径</div>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" v-model="dept.url" placeholder="访问路径"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-2 control-label">权限代码</div>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" v-model="dept.percode" placeholder="权限代码"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-2 control-label">菜单类型</div>
                            <div class="col-sm-10">
                                <!--<input type="text" class="form-control" v-model="dept.type" placeholder="菜单类型"/>-->
                                <select v-model="dept.type"  style="width:100%;height:30px;font-size:14px;" >
                                    <option value="menu" style="width:15px;font-size:14px">菜单</option>
                                    <option value="button" style="width:15px;font-size:14px">按钮</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-sm-2 control-label">上级菜单</div>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" style="cursor:pointer;" v-model="dept.parentName"
                                       @click="deptTree" readonly="readonly" placeholder="一级菜单"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-2 control-label">排序号</div>
                            <div class="col-sm-10">
                                <input type="number" class="form-control" v-model="dept.sortstring" placeholder="排序号"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-2 control-label">菜单图标</div>
                            <div class="col-sm-10">
                               <input type="text"  id="picker"  class="form-control"   v-model="dept.icon" placeholder="菜单图标"/>

                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-2 control-label"></div>
                            <input type="button" class="btn btn-primary" @click="saveOrUpdate" value="确定"/>
                            &nbsp;&nbsp;<input type="button" class="btn btn-warning" @click="reload" value="返回"/>
                        </div>
                    </form>
                </div>
            </div>
            <!-- 选择部门 -->
            <div id="deptLayer" style="display: none;padding:10px;">

                <div class="wrapper">
                    <div class="treeShowHideButton" onclick="search();">
                        <label id="btnShow" title="显示搜索" style="display:none;">︾</label>
                        <label id="btnHide" title="隐藏搜索">︽</label>
                    </div>
                    <div class="treeSearchInput" id="search">
                        <label for="keyword">关键字：</label><input type="text" class="empty" id="keyword" maxlength="50">
                        <button class="btn" id="btn" onclick="searchNode()"> 搜索</button>
                    </div>
                    <div class="treeExpandCollapse">
                        <a href="javascript:" id="btnExpand">展开</a>
                        <a href="javascript:" id="btnCollapse">折叠</a>
                    </div>
                    <div id="deptTree" class="ztree"></div>
                </div>
            </div>
        </div>

        <div th:include="common/Head :: js"></div>
        <script src="../bootstrap/js/dept/js/vue.min.js"></script>
        <script src="../ztree/jquery.ztree.all.min.js"></script>
        <script src="../ztree/jquery.ztree.exhide.js"></script>


      <script src="../bootstrap/js/dept/js/jquery.treegrid.min.js"></script>
        <script src="../bootstrap/js/dept/js/jquery.treegrid.bootstrap3.js"></script>
        <script src="../bootstrap/js/dept/js/jquery.treegrid.extension.js"></script>
        <script src="../bootstrap/js/dept/js/tree.table.js"></script>


        <script src="../js/menu/js/permission.js"></script>
        <script src="../bootstrap/js/dept/js/ztree.js"></script>
        <script th:src="@{/fonticon-picker/icon-js/fa-icon-source.js}"></script>
        <script th:src="@{/fonticon-picker/icon-js/jquery.fonticonpicker.min.js}"></script>


        <script>

            $(function() {
                $('#picker').fontIconPicker({
                    source: fa_icons,
                    theme: 'fip-bootstrap',
                    emptyIconValue:'none',
                    hasSearch: true,
                    emptyIcon: true  //是否显示空
                });
            });
            var lastValue = "", nodeList = [], key = $("#keyword");
            key.bind("focus", focusKey).bind("blur", blurKey).bind("change cut input propertychange", searchNode);
            key.bind("keydown", function (e) {
                if (e.which == 13) {
                    searchNode();
                }
            });

            function focusKey(e) {
                if (key.hasClass("empty")) {
                    key.removeClass("empty");
                }
            }

            function blurKey(e) {
                if (key.get(0).value === "") {
                    key.addClass("empty");
                }
                searchNode(e);
            }

            function searchNode() {
                var value = $.trim(key.get(0).value);
                var keyType = "name";
                if (lastValue === value) {

                    return;
                }
                lastValue = value;
                var nodes = ztree.getNodes();
                if (value == "") {
                    showAllNode(nodes);
                    return;
                }
                hideAllNode(nodes);
                nodeList = ztree.getNodesByParamFuzzy(keyType, value);

                updateNodes(nodeList);
            }

            function hideAllNode(nodes) {
                //var ztree = $.fn.zTree.getZTreeObj("deptTree");
                nodes = ztree.transformToArray(nodes);
                for (var i = nodes.length - 1; i >= 0; i--) {
                    ztree.hideNode(nodes[i]);
                }
            }

            function showAllNode(nodes) {
                nodes = ztree.transformToArray(nodes);
                for (var i = nodes.length - 1; i >= 0; i--) {
                    if (nodes[i].getParentNode() != null) {
                        ztree.expandNode(nodes[i], false, false, false, false);
                    } else {
                        ztree.expandNode(nodes[i], true, true, false, false);
                    }
                    ztree.showNode(nodes[i]);
                    showAllNode(nodes[i].children);
                }
            }

            function updateNodes(nodeList) {
                ztree.showNodes(nodeList);
                for (var i = 0, l = nodeList.length; i < l; i++) {
                    var treeNode = nodeList[i];
                    showChildren(treeNode);
                    showParent(treeNode)
                }
            }

            function showChildren(treeNode) {
                if (treeNode.isParent) {
                    for (var idx in treeNode.children) {
                        var node = treeNode.children[idx];
                        ztree.showNode(node);
                        showChildren(node);
                    }
                }
            }
            function showParent(treeNode) {
                var parentNode;
                while ((parentNode = treeNode.getParentNode()) != null) {
                    ztree.showNode(parentNode);
                    ztree.expandNode(parentNode, true, false, false);
                    treeNode = parentNode;
                }
            }

            function search($this) {
                $('#search').slideToggle(200);
                $('#btnShow').toggle();
                $('#btnHide').toggle();
                $('#keyword').focus();
            }

            $(function () {


                $("#systemManage").attr("class", "active");
                $("#systemManage_ul").attr("class", "nav nav-second-level collapse in");

                $("#deptManage").attr("class", "active");



                $('#btnExpand').click(function () {
                    ztree.expandAll(true);
                });
                $('#btnCollapse').click(function () {
                    ztree.expandAll(false);
                });
                $(function () {
                    var $thisA = $('a[href="/permission/index"]');
                    $thisA.parent().attr("class", "active");
                    $thisA.parent().parent().attr("class", "nav nav-second-level collapse in");
                });
            });
        </script>
    </body>
</html>